<template>
  <div>
    <div class="grid">
      <ul class="grid_div">
        <li v-for="(item, index) in imgs" :key="index" @mouseover="end(item)" @mouseout="start(item)" ref="myli">
          <img :src="item.pic" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        { pic: require("../../assets/img/header-footer/swiper_1.png") },
        { pic: require("../../assets/img/header-footer/swiper_2.png") },
        { pic: require("../../assets/img/header-footer/swiper_3.png") },
        { pic: require("../../assets/img/header-footer/swiper_4.png") },
        { pic: require("../../assets/img/header-footer/swiper_5.png") },
        { pic: require("../../assets/img/header-footer/swiper_6.png") },
        { pic: require("../../assets/img/header-footer/swiper_7.png") },
        { pic: require("../../assets/img/header-footer/swiper_8.png") },
      ],
      imgwidth:-215,
    };
  },
  methods:{
    start(index){
      // console.log(index);
      // const time = 1000;
      // index++
      // // 向左移动的距离
      // setInterval(() => {
      //   this.$refs.myli.style.transition = index * this.imgwidth + 'px';
      // }, time);
    },
    end(item){

    }
  }
};
</script>

<style lang="scss" scoped>
.grid {
  width: 100%;
  height: 275px;
  padding-top: 40px;
  border-bottom: 1px solid #e0e0e0;
  .grid_div {
    width: 1330px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    li{
      width: 215px;
      height: 163px;
      img {
      width: 215px;
      height: 143px;
      margin-top: 20px;
    }
    }
  }
}
</style>
